<template>
  <t-row :gutter="[16, 16]" style="padding-bottom: 20px">
    <t-col :flex="3" style="padding-left:25px">
      <div style="padding-top: 20px"></div>
      <t-card :bordered="false">
        <div class="form-step-container">
          <div class="rule-tips">
            <t-alert theme="info" title="警告：" :close="true">
              <div slot="message">
                <p class="span-txt">
                  1、XXXXXXXXXXXXXXXXXXX
                </p>
                <p class="span-txt">2、XXXXXXXXXXXXXXXXXXX</p>
              </div>
            </t-alert>
          </div>

          <t-form
              class="step-form"
              :data="formData"
              labelAlign="right"
              @submit="onSubmit"
              style="padding-top: 20px">
            <t-form-item label="旧密码" name="oldPassword">
              <t-input type="password" v-model="oldPassword" @blur="checkIt">
                <lock-on-icon slot="prefix-icon"></lock-on-icon>
              </t-input>
            </t-form-item>
            <t-form-item label="新密码" name="empPassword">
              <t-input type="password" v-model="formData.empPassword">
                <lock-on-icon slot="prefix-icon"></lock-on-icon>
              </t-input>
            </t-form-item>
            <t-form-item label="确认密码" name="confirmPassword">
              <t-input type="password" v-model="confirmPassword" @blur="checkPsw">
                <lock-on-icon slot="prefix-icon"></lock-on-icon>
              </t-input>
            </t-form-item>
            <t-form-item>
              <t-button theme="primary" type="submit">提交申请</t-button>
            </t-form-item>
          </t-form>
        </div>
      </t-card>
    </t-col>

    <t-col :flex="1" style="padding-right:25px;padding-top: 20px">
      <t-card class="user-intro" :bordered="false">
        <t-avatar size="120px">
          <img src="../../../assets/assets-logo.png" style="height: 120px;width: 120px">
        </t-avatar>
        <div class="name">
          <b>My Account</b>
        </div>
        <div class="position"></div>
      </t-card>
    </t-col>
  </t-row>
</template>
<script>
import {LockOnIcon} from 'tdesign-icons-vue';
import axios from "axios";
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'User',
  components: {
    LockOnIcon,
  },
  methods: {
    onSubmit() {
      axios.post("/api/admin/emp/update", this.formData)
          .then(res => {
            if (res.data.code === 200) {
              MessagePlugin.success('更新成功!')
              this.$router.push("/login");
              localStorage.removeItem("token")
            }
          })
    },
    checkIt() {
      axios.get("/api/admin/emp/getInfoByEmpId")
          .then(res => {
            if (res.data.code === 200) {
              if (this.oldPassword !== res.data.data.empPassword) {
                MessagePlugin.error('旧密码错误!')
              }
            }
          })
    },
    checkPsw() {
      if (this.formData.empPassword !== this.confirmPassword) {
        MessagePlugin.error('密码不一致!')
      }
    }
  },
  data() {
    return {
      formData: {
        empPassword: '',
      },
      oldPassword: '',
      confirmPassword: '',
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../style/index.less');
</style>
